<style scoped>
@media (min-width: 1000px) {
  .edit_card {
    width:400px;
    /* border:1px solid blue; */
     padding-right: 20px; 
    /* box-shadow: 2px 2px 2px #666; */
  }
}
@media (max-width: 400px) {
  .edit_card {
    width:200px;
    border:1px solid blue
  }
}
</style>

<template>
 <transition name="fade" mode="out-in">
  <Card>
  <div class='edit_card'>
        <Form :model="edit" :label-width="80" :rules="ruleValidate">
           
            <Form-item label="日期" prop="day">

                <Button-group style="padding-right:10px">
                    <Button @click="changeDay(-1)"  icon="ios-skipbackward"></Button>
                    <Button @click="changeDay(0)"  icon="ios-location"></Button>
                    <Button @click="changeDay(1)"  icon="ios-skipforward"></Button>
                </Button-group>

                <Date-picker
                :open="open"
                :value="edit.day"
                type="date"
                @on-change="handleChange"
                @on-ok="handleOk">
                    <a href="javascript:void(0)" @click="handleClick">
                        <Icon type="ios-calendar-outline"></Icon>
                        <template>{{getDateShowText(edit.day)}}</template>
                    </a>
                </Date-picker>
                
            </Form-item>
             <Form-item label="工作内容" prop="content">
                <Input  placeholder="请输入..." type="textarea" :rows="2"  v-model="edit.content"></Input>
            </Form-item>
            
            <Form-item label="时长" prop="duration">
                  
                <Input-number style="width:60px" :max="24" :min="0.5" :step="0.5" v-model="edit.duration"></Input-number> 小时
                <div @click="toggleHelper" style="display:inline;cursor:pointer;padding-left:10px;padding-right:10px;color:#c3c4c2">
                    <Icon :type="showDurationHelper?'chevron-right':'chevron-down'"></Icon>
                </div>
                <Button v-if="showDurationHelper" @click="edit.duration=2">2</Button>
                <Button v-if="showDurationHelper" @click="edit.duration=4">4</Button>
                <Button v-if="showDurationHelper" @click="edit.duration=6">6</Button>
                <Button v-if="showDurationHelper" @click="edit.duration=8">8</Button>

                <!-- <Button  @click="showDurationHelper">快速选择</Button> -->
            </Form-item>
            <!-- <Form-item  prop="duration"> -->
                <!-- <Time-picker style="width:100%" :value="edit.duration" type="timerange" placement="bottom-end" placeholder="选择时间"></Time-picker> -->
                
            <!-- </Form-item> -->

            <Form-item v-if="showDurationHelper" label="时间段" prop="timerange">
                <Time-picker style="width:100%" v-model="edit.timerange" format="HH:mm" type="timerange" placement="bottom-end" placeholder="开始时间和结束时间"></Time-picker>
            </Form-item>
            
            <Form-item prop="labels">
                <Tooltip slot="label"  placement="top" content="点击标签可以选中或取消">
                    <Icon type="help-circled"></Icon>
                </Tooltip>
                <div v-for="item in allLabels" :key="item" @click="toggleLabel(item)" style="display:inline">
                    <Tag  :name="item"  :color="calcColor(item)">{{item}}</Tag>
                </div>
            </Form-item>
            <Form-item>
                <Row>
                    <Col span="12">
                        <Button style="width:100%" type="primary" @click="ok">确定</Button>
                    </Col>
                    <Col span="12">
                        <Button type="ghost" style="margin-left: 8px;width:100%" @click="cancel">取消</Button>
                    </Col>
                </Row>
                <!-- <Button type="primary" @click="add">确定</Button>
                <Button type="ghost" style="margin-left: 8px;" @click="cancel">取消</Button> -->
            </Form-item>
        </Form>
    </div>
    </Card>
    </transition>
</template>
<script>


    import moment from 'moment';
    import { mapState, mapActions } from 'vuex'
    import { getDateShowText } from './tools'

    import TransferDom from 'iview/src/directives/transfer-dom';

    export default {
        name: 'EditCard',
        props:{
            edit: Object,
        },
        computed: Object.assign(
            mapState({
                'allLabels':'allLabels'
            }),
           {
               
           }
        ),
        directives: { TransferDom },
        data(){
            return {
                open: false,
                showCard: false,
                ruleValidate: {
                    content: [
                        { required: true, message: '工作内容不能为空', trigger: 'blur' }
                    ],
                    duration: [
                        { required: true, message: '时长不能为空', trigger: 'blur' }
                    ],
                    day: [
                        { required: true, message: '日期不能为空', trigger: 'blur' }
                    ],
                },
                showDurationHelper: false,
                showRange: false,
            }
        },
        mounted: function(){
            this.timerangeUnwatch = this.$watch('edit.timerange', function (newVal, oldVal) {
                if(newVal && newVal.length == 2){
                    var minutes = moment(newVal[1]).diff(moment(newVal[0]),'minutes');
                    this.edit.duration = Math.round(minutes/60/0.5)*0.5;
                }
                
            })
        },
        unmounted: function(){
            this.timerangeUnwatch();
        },
        methods: Object.assign(
            mapActions(['postLog']),
            {
                changeDay(step){
                    switch (step){
                        case 1:
                            this.edit.day = moment(this.edit.day).add(1, 'days');
                            break;
                        case 0:
                            this.edit.day = new Date();
                            break;
                        case -1:
                            this.edit.day = moment(this.edit.day).subtract(1, 'days');
                            break;
                    }
                    
                },
                toggleHelper(){
                    this.showDurationHelper = !this.showDurationHelper;
                    this.showRange = true;
                },
                calcColor(label){
                    if(this.edit.labels){
                        var index = this.edit.labels.indexOf(label);
                        if(index >= 0){
                            return 'blue';
                        }
                    }
                   
                },
                ok(){
                    this.$emit('ok',this.edit);
                },
                getDateShowText,
                handleClick(){
                    this.open = !this.open;
                },
                handleChange(date){
                    this.edit.day = date;
                    this.open = !this.open;
                },
                handleOk(){
                    this.open = false;
                },
                toggleLabel(name){
                    if(!this.edit.labels){
                        this.edit.labels = [];
                    }
                    const index = this.edit.labels.indexOf(name);
                    if(index >= 0){
                        this.edit.labels.splice(index, 1);
                    } else {
                        this.edit.labels.push(name);
                    }
                },
                cancel(){
                    this.$store.commit("setShowEditCard",false);
                }
        })
    

    }
</script>

